<script setup lang="ts">
import { RouterLink, RouterView, useRoute, useRouter } from "vue-router";
import { computed, ref } from 'vue'
const header = ref(true)
window.addEventListener('scroll', () => {
    if (window.scrollY > 0) {
        header.value = false
    } else {
        header.value = true
    }
})

const showImg = () => {
    return header.value ? '/src/assets/logo.png' : '/src/assets/logo-o.png'
}

// 高亮
const route = useRoute()
const isActive = (path: string) => {
    return route.path === path;
}
</script>
<template>
    <div class="header" :style="{ backgroundColor: header ? 'transparent' : '#fff' }">
        <div class="header-content">
            <div class="header-logo">
                <img :src="showImg()" alt="">
            </div>
            <div class="header-list" :style="{ color: header ? '#fff' : '#333' }">
                <a href="/" :class="{ active: isActive('/'), 'header-item': true }">网站首页</a>
                <a href="/smartClinic?department=3"
                    :class="{ active: isActive('/smartClinic'), 'header-item': true }">智慧门诊</a>
                <a href="/healthManagement?type=0"
                    :class="{ active: isActive('/healthManagement'), 'header-item': true }">健康管理</a>
                <a href="/drugManagement" :class="{ active: isActive('/drugManagement'), 'header-item': true }">药品管理</a>
                <a href="/aboutUs" :class="{ active: isActive('/aboutUs'), 'header-item': true }">关于我们</a>
                <a href="/personalCenter" class="header-item">个人中心</a>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.header {
    position: fixed;
    width: 100vw;
    height: 9vh;
    background-color: transparent;
    z-index: 1;

    .header-content {
        display: flex;
        width: 82vw;
        margin: auto;

        .header-logo {
            display: flex;
            flex: 1;
            height: 9vh;
            align-items: center;

            img {
                height: 6vh;
            }
        }

        .header-list {
            flex: 3;
            display: flex;

            .header-item {
                display: flex;
                width: 8vw;
                font-size: 1vw;
                align-items: center;
                justify-content: center;
                color: inherit;

            }

            .header-item:hover {
                border-bottom: 0.2vw solid #25c96a;
                color: #25c96a;
            }

            .active {
                border-bottom: 0.2vw solid #25c96a;
                color: #25c96a;
            }

        }
    }
}
</style>